import React, { Component } from 'react';
// import { connect } from 'dva';
import { Upload, Button, Icon, Modal } from 'antd';
import EditTopic from './component/EditTopic';
import styles from './topicEnter.less';

// @connect(() => {})
export default class TopicEnter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // 上传的数据列表
      topicList: [
        {
          name: 'wwj',
        },
        {
          name: 'hl',
        },
        {
          name: 'xx',
        },
      ],
      // 编辑弹框是否展示
      visible: false,
      // 当前选中的题目
      // currentTopic: undefined,
    };
  }

  getUploadInfo = () => {
    return {
      name: 'file',
      directory: true,
      // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      action() {},
      headers: {
        authorization: 'authorization-text',
      },
      onChange() {
        // if (info.file.status !== 'uploading') {
        // }
        // if (info.file.status === 'done') {
        //   message.success(`${info.file.name} file uploaded successfully`);
        // } else if (info.file.status === 'error') {
        //   message.error(`${info.file.name} file upload failed.`);
        // }
      },
    };
  };

  render() {
    const { topicList = [] } = this.state;
    return (
      <div>
        <div>
          选择要导入的题目：
          <Upload
            ref={view => {
              this.uplodeView = view;
            }}
            {...this.getUploadInfo()}
          >
            <Button>
              <Icon type="upload" /> 点击上传文件
            </Button>
          </Upload>
        </div>
        <div>导入的题库列表：</div>
        <div className={styles.contentBox}>
          {topicList.map(item => {
            return (
              <div className={styles.topEasyItem} key={`index${item.name}`}>
                题目类型：
                {item.name}
                <div className={styles.stateBox}>
                  <div className={styles.uploadSuccess}>上传完成</div>

                  <Button>查看</Button>
                </div>
              </div>
            );
          })}
        </div>

        <Modal width="80%" visible={this.state.visible} title="题库编辑">
          <EditTopic />
        </Modal>
      </div>
    );
  }
}
